<template>
  <div
    v-if="agentChatStore.customerName"
    class="flex w-[100%] items-center justify-center border-[1px] border-r-[1px] border-t-[1px] border-[#ecdfdf] text-center text-lg font-bold"
  >
    <UserMinus class="mr-2" />
    <span class="shine my-3">
      {{ agentChatStore.customerName ?? '' }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { useAgentChatStore } from '#/store';

const agentChatStore = useAgentChatStore();
</script>
<style scoped lang="scss">
.shine {
  background-image: linear-gradient(
    to right,
    red,
    orange,
    brown,
    green,
    brown,
    orange,
    red,
    orange,
    brown,
    green,
    brown,
    orange,
    red
  );
  background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: bgp 8s infinite linear;
}

@keyframes bgp {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -200% 0;
  }
}
</style>
